<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动的现象</title>
	<style type="text/css">
		div{
			/*width: 200px;*/
			height: 200px;
			color: #fff;
            	}
            	div.left{
            		background-color: red;
            		float: left;
            	}
            	div.right{
            		/*width: 300px;*/
            		background-color: green;
            		float: left;
            	}
            	div.center{
            		background-color: orange;
            		float: left;
            	}

	</style>
</head>
<body>
	<!-- 浮动的现象：
		         0.文字环绕
			1.脱离了标准文档流
			2.浮动元素互相贴靠
			3.浮动元素有收缩现象
	 -->
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
	<div class="center">右边的盒子</div>

</body>
</html>